<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" crossorigin="anonymous">

    <title th:text="${user.getUsername()}"></title>
</head>

<style>
    #user-container {
        background: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px, rgba(0, 0, 0, 0.08) 0 2px 8px;
        border-radius: 8px;
        padding: 14px 16px 1px;
        user-select: none;
        margin-top: 24px;
    }

    #main-container {
        background: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px, rgba(0, 0, 0, 0.08) 0 2px 8px;
        border-radius: 8px;
        padding: 14px 16px 1px;
        user-select: none;
        margin-top: 24px;
    }
</style>

<body>
<div th:replace="~{common/navigationbar::navigationbar('')}"></div>


<div class="d-flex justify-content-between container">
    <!--左边栏-->
    <div class="d-flex flex-column col-md-4">
        <!--作者信息-->
        <div id="user-container">
            <div class="text-center">
                <!--用户有头像-->
                <div th:if="${user.getAvatar()!=null && user.getAvatar()!=''}">
                    <img th:src="${user.getAvatar()}" alt="..." class="rounded-lg" style="width: 75px;height: 75px">
                </div>
                <!--用户没有头像-->
                <div th:if="${user.getAvatar()==null || user.getAvatar()==''}">
                    <svg width="75px" height="75px" viewBox="0 0 16 16" class="bi bi-person-fill"
                         fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
                    </svg>
                </div>
            </div>

            <h5 style="text-align: center" th:text="${user.getUsername()}"></h5>
            <table class="table table-borderless table-sm">
                <thead>
                <tr>
                    <th scope="col" style="text-align: center" class="text-muted">文章</th>
                    <th scope="col" style="text-align: center" class="text-muted">浏览</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="text-align: center">
                        <a class="text text-decoration-none text-info" href="#" th:text="${pageArticle.getTotal()}"></a>
                    </td>
                    <!--todo 浏览量-->
                    <td style="text-align: center">
                        <a class="text text-decoration-none text-muted">3000</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--右边栏-->
    <div class="d-flex flex-column col-md-8">
        <div id="main-container">
            <!--Tag 标签-->
            <div>
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active"
                           th:href="@{'/user/' + ${user.getUid()} + '/article'}">发布的文章</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">问答</a>
                    </li>
                </ul>
            </div>
            <!--文章内容-->
            <p th:if="${totalPage <= 0}" th:class="text-muted" th:text="'没有发布任何文章~~'" style="margin-top: 15px"></p>
            <div>
                <table class="table table-sm table-hover table-striped table-borderless">
                    <thead>
                    <tr>
                        <!--调整每列宽度-->
                        <th scope="col" style="width: 50%"></th>
                        <th scope="col" style="width: 20%"></th>
                    </tr>
                    </thead>
                    <tbody id="content-table">
                    <tr th:each="article : ${pageArticle.getRecords()}">
                        <td>
                            <a th:href="@{'/blog/article/' + ${article.getId()}}" th:text="${article.getTitle()}"></a>
                        </td>
                        <td class="font-weight-light text-muted" th:text="${article.getFormattedCreateTime()}"></td>
                    </tr>
                    </tbody>
                </table>
                <!--分页-->
                <div th:replace="~{common/pagination-common::page-navigation-common(${pageArticle.getCurrent()},5,${totalPage},
                '/user/' + ${user.getUid()} + '/article')}"></div>
            </div>
        </div>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/js/jquery-3.5.1.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/popper.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/js/bootstrap.min.js}" crossorigin="anonymous"></script>
</body>
</html>